<template>
	<view class="container" :style="{height: winHeight+'px;'}">
		<view>
			<view style="height: 150px;background-image: linear-gradient(to top right,#2473C9,#6189d3);  ;">
				<view style="padding-top: 20px;margin-left: 10px;display:  flex;line-height:20px;">
					<image class="index-user" :src="avatarUrl"></image>
					<span style="color: #F8FFFF;font-size: 13px;font-weight: bold;" class="inline ml5 "> <span
							v-html="curLoginName"></span></span>
					<span @click="ngUserInfo()" class="font26 fa fa-angle-right fr mr5"
						style="display: none; line-height: 48px;"></span>
				</view>
			</view>
			<view style="height: 55px;">
			</view>
			<view style="position: absolute;top:40px;left: 0px; display: inline-block;width:100%;">
				<view class="banner-box">
					<view style="margin-right: 10px; font-weight: bold;color: #2A3975;text-align: left;">
						<span style="font-size:18px;">F2BPM流程方案</span>
						<span style="font-size:12px; display: block;padding-top:5px;">完全自主研发、支持国产化</span>
					</view>
					<view>
						<image class="banner-img" :src="bannerImgUrl"></image>
					</view>

				</view>
			</view>
		</view>

		<view class="flex-panel bg-white" style="flex-direction: row; ">
			<view class="circle_outsidebox" @click="ngTo('todoList')">
				<view class="home_tab_box">
					<view class="home_tab_title_box"><span>待办事项</span></view>
					<view class="ml10"><span class="red font20">{{countData.todoCount}}</span></view>
				</view>
			</view>
			<view style="line-height: 70px;">
				<span class="divider divider--vertical" style="font-size: 30px;"></span>
			</view>
			<view class="circle_outsidebox" @click="ngTo('doneList')">
				<view class="home_tab_box">
					<view class="home_tab_title_box"><span>已办事项</span></view>
					<view class="ml10"><span class="gree font20">{{countData.doneCount}}</span></view>
				</view>
			</view>
		</view>
		<view class="flex-panel none-box-shadow">
			<view class="circle_outsidebox circle_outsidebox_bigger"
				style="background-image: linear-gradient(to bottom right, #F1FFEF,#DEF3D3);" @click="ngTo('todoList')">
				<view class="square_box">
					<view class="task-number-box">
						<span class="task-number red">{{countData.todayTodoCount}}</span>
					</view>
					<view><span class="task-name">今日待办</span></view>
				</view>
				<view class="circle_box bg-color4 mt10">
					<i class="icon icon-Interface-61"></i>
				</view>
			</view>
			<view class="circle_outsidebox circle_outsidebox_bigger ml10" style="background-color: #E1F9FA; "
				@click="ngTo('myWorkItem')">
				<view class="square_box">
					<view class="task-number-box">
						<span class="task-number">{{countData.myStartCount}}</span>
					</view>
					<view><span class="task-name">我发起的</span></view>
				</view>
				<view class="circle_box bg-color5 mt10">
					<i class="icon  icon-kehuliebiao    "></i>
				</view>
			</view>


		</view>
		<view class="flex-panel none-box-shadow">
			<view class="circle_outsidebox circle_outsidebox_bigger" style="background-color: #FBEEDC; "
				@click="ngTo('todoCirculatedList')">
				<view class="square_box">
					<view class="task-number-box">
						<span class="task-number">{{countData.circulatedTodoCount}}</span>
					</view>
					<view><span class="task-name">待阅事项</span></view>
				</view>
				<view class="circle_box bg-color5 mt10">
					<i class="icon icon-a-Calendar3  "></i>
				</view>
			</view>

			<view class="circle_outsidebox circle_outsidebox_bigger ml10"
				style="background-image: linear-gradient(to bottom right, #F2ECF4,#E9ECFF);  "
				@click="ngTo('doneCirculatedList')">
				<view class="square_box">
					<view class="task-number-box">
						<span class="task-number">{{countData.circulatedDoneCount}}</span>
					</view>
					<view><span class="task-name">已阅事项</span></view>
				</view>
				<view class="circle_box bg-color2 mt10">
					<i class="fa fa-calendar-check-o ml4"></i>
				</view>
			</view>
		</view>
		<view class="flex-panel none-box-shadow">
			<view class="circle_outsidebox circle_outsidebox_bigger"
				style="background-image: linear-gradient(to bottom right, #ebf3f6,#D8EBF6);" @click="ngTo('draftList')">
				<view class="square_box">
					<view class="task-number-box">
						<span class="task-number">{{countData.myDraftCount}}</span>
					</view>
					<view><span class="task-name">草稿箱</span></view>
				</view>
				<view class="circle_box bg-color1 mt10">
					<i class="icon icon-Files-66    "></i>
				</view>
			</view>
			<view class="circle_outsidebox circle_outsidebox_bigger ml10" style="background-color: #D8EBF6;"
				@click="ngTo('myCancelList')">
				<view class="square_box">
					<view class="task-number-box">
						<span class="task-number">{{countData.cancelCount}}</span>
					</view>
					<view><span class="task-name">已作废</span></view>
				</view>
				<view class="circle_box bg-color3 mt10">
					<i class="fa   fa-trash-o ml2"></i>
				</view>
			</view>
		</view>
		<view class="flex-panel  none-box-shadow" style="background-color: #FFFFFF;text-align: center; ">
			<view style="padding-top:5px;margin: 0 auto;    line-height: 40px;height: 40px;">
				<span class="task-title ml15">将要超时</span>
				<uni-badge class="num-badge" :text="expirCountData.WillbeTimeOutCount" type="warning">
				</uni-badge>
				<span class="task-title ml15">近7天超时
				</span>
				<uni-badge class="num-badge" :text="expirCountData.WeekWillbeTimeOutCount" type="error">
				</uni-badge>
				<span class="task-title ml15">已超时</span>
				<uni-badge class="num-badge" :text="expirCountData.TimeOutTotalCount" type="error">
				</uni-badge>
			</view>
		</view>
		<view style="height: 20px;">
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import f2bpmReport from '@/pages/components/f2bpm-report.vue'
	export default {
		components: {
			f2bpmReport
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'author']),
		onLoad: function(option) {
			var that = this;
			var success = that.$store.getters.validateLogin;
			if (this.forcedLogin && !success) {
				this.guideToLogin();
				return false;
			}
			that.loadCount();
			//that.loadApps();
			//option为object类型，会序列化上个页面传递的参数
			//console.log(option.id); //打印出上个页面传递的参数。
		},
		onPullDownRefresh: function() {
			//下拉刷新
			var that = this;
			window.location.reload();
			// that.loadCount();
			// that.loadApps();
			uni.stopPullDownRefresh();
		},
		mounted() {
			var that = this;
		},
		created() {
			var that = this;
			var author = that.$store.getters.getState.author;
			if (author == null) {
				return false;
			}
			that.curLoginName = decodeURI(author.realName);
			that.curFirstName = that.curLoginName.substr(0, 1);
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.model);
					// console.log(res.pixelRatio);
					// console.log(res.windowWidth);
					// console.log(res.windowHeight);
					that.winHeight = res.windowHeight;
					// console.log(res.language);
					// console.log(res.version);
					// console.log(res.platform);
				}
			});
			try {
				uni.setNavigationBarTitle({
					title: that.$store.getters.getF2bpmSysConfig.sysName || ""
				});
			} catch (err) {
				console.info(err)
			}

		},
		data() {
			return {
				curFirstName: "",
				curLoginName: "",
				avatarUrl: "/static/images/home/user.png",
				bannerImgUrl: "/static/images/home/banner/banner.png",
				loading: false,
				winHeight: 800,
				//barnner
				barnners: [{
					img: "/static/images/home/banner/cbd.jpg",
					content: '内容 A'
				}, {
					img: "/static/images/home/banner/muwu.jpg",
					content: '内容 B'
				}, {
					img: "/static/images/home/banner/shuijiao.jpg",
					content: '内容 C'
				}],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				//待办已办数量，待阅已阅作废箱
				countData: {
					todoCount: 0,
					doneCount: 0,
					myStartCount: 0,
					myDraftCount: 0,
					circulatedTodoCount: 0,
					circulatedDoneCount: 0,
					cancelCount: 0
				},
				expirCountData: {
					TodayTodoCount: 1,
					WillbeTimeOutCount: 0,
					WeekWillbeTimeOutCount: 0,
					TimeOutTotalCount: 0
				}
				//常用应用
				,
				appsData: [],
				reportData: [

					{
						title: "",
						code: "report_ZongShuTongJi"
					},
					{
						title: "",
						code: "report_KaiFaCeShiBiao"
					},
					{
						title: "",
						code: "report_FeiYongBaoXiao"
					}
				]
			}
		},
		methods: {
			...mapMutations(['login']),
			loadCount() {
				var that = this;
				Object.toAjaxJson('/rest/api/processEnactmentApi/', "getMyListTaskCountJson", {
					instanceType: 'All'
				}, true, null, function(
					res) {
					that.countData = res.data;
					console.info(that.countData);
				});
				Object.toAjaxJson('/rest/api/processEnactmentApi/', "taskExpireTimeReport", {
					instanceType: 'All'
				}, true, null, function(
					res) {
					that.expirCountData.TodayTodoCount = res.data.TodayTodoCount == 0 ? "0" : res.data
						.TodayTodoCount;
					that.expirCountData.WillbeTimeOutCount = res.data.WillbeTimeOutCount == 0 ? "0" : res.data
						.WillbeTimeOutCount;
					that.expirCountData.TimeOutTotalCount = res.data.TimeOutTotalCount == 0 ? "0" : res.data
						.TimeOutTotalCount;
					that.expirCountData.WeekWillbeTimeOutCount = res.data.WeekWillbeTimeOutCount == 0 ? "0" : res
						.data.WeekWillbeTimeOutCount;
				});
			},
			loadApps() {
				var that = this;
				var total = 0
				var pageCount = 0
				var pageIndex = 1
				var pageSize = 12
				var sort = 'OrderNo asc,CreatedTime'
				var order = 'desc'
				var functionID = "FastChannel";
				var infoType = "link";
				Object.toAjaxJson('/workflow/security/article/', 'loadPersonalArticleListJsonByPage/?infoType=' +
					infoType +
					'&publicAuthorizeType=' + functionID + '&defaultWhere=' + "FunctionID='" + functionID +
					"' and IsAudited=2 ", {
						page: pageIndex,
						rows: pageSize,
						sort: sort,
						order: order
					}, true, null,
					function(res) {
						res.rows.forEach(function(row) {
							if (row.articlePhotoFullPath.indexOf('http:') == -1) {
								row.articlePhotoFullPath = __serverpath + row.articlePhotoFullPath
							}
						});
						that.appsData = res.rows;
						console.info(res)
					});
				 
			},
			ngTo(pageName) {
				console.info(pageName)
				uni.navigateTo({
					url: '../workflow/businessMP/' + pageName
				});
			},
			ngUserInfo() {
				uni.navigateTo({
					url: './upload_demo'
				});
			},
			change(e) {
				this.current = e.detail.current;
			},
			fastLinkclick(item) {
				var url = item.linkUrl;
				// uni.navigateTo({
				// 	url: url
				// });
				console.info(item)
			},
			guideToLogin() {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}

		}
	}
</script>

<style>
	@import url("@/static/css/home.css");

	.list-icon {
		color: #ffffff;
		text-align: center;
		font-family: texticons;
	}

	.logo-firstName {
		display: inline-block;
		background-color: #978DF1;
		color: #FFFFFF;
		font-size: 16px;
		width: 60rpx;
		height: 60rpx;
		line-height: 56rpx;
		text-align: center;
		margin-left: 10px;
		border-radius: 120rpx;
	}

	.head-bar {
		height: 30px;
	}

	.ng-link-item {
		display: inline-block;
		padding: 5px;
		padding-left: 15px;
		padding-right: 15px;
		margin: 5px;
		background-color: #EDEEF1;
		border-radius: 3px;
		color: #555;
		font-size: 10px;
	}

	.index-user {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10px;
		border-radius: 40rpx;
	}

	.banner-img {
		height: 146px;
		width: 164px;
		margin-top: 5px;
	}
	.icon{
		font-size: 26px;
	}
</style>
